<template>
    <div class="HomeNewSong">
        <div class="NewSong_box" :key="item.id">
            <!-- 封面 -->
            <div class="NewSong_img">
                <img :src="item.picUrl" alt="" />
                <div class="diTu"></div>
            </div>
            <!-- 标题 播放按钮 -->
            <div class="Title_Play">
                <div class="Title">
                    <p class="p1">{{ item.name }}</p>
                    <p class="p2">{{ item.artists }}</p>
                </div>
                <div class="Play" @click="getAudioUrl(item.id)">
                    <img src="../assets/play.png" alt="" />
                </div>
            </div>
            <!-- 特效装饰 -->
            <div class="SpecialEffects">
                <div class="glass"></div>
                <div class="demo"></div>
                <div class="theBase">
                    <div class="Base0"></div>
                    <div class="Base1"></div>
                    <div class="Base2"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
import { Toast } from 'vant';
const {
    mapState: controlAudioMapState,
    mapMutations: controlAudioMapMutations,
    mapGetters: controlAudioMapGetters,
    mapActions: controlAudioMapActions
} = createNamespacedHelpers('controlAudio');
export default {
    name: "HomeNewSong",
    props: {
        item: {
            teyp: Object,
            default() { return {}; },
        }
    },
    computed: {
        ...controlAudioMapState(['id']),
    },
    methods: {
        ...controlAudioMapMutations(['playSuspend_Switch', 'changeAudioUrl', 'changeStateProperty']),

        // 获取音频路径
        getAudioUrl(id) {
            // 消除重复请求
            if (this.id === id) {
                this.playSuspend_Switch();
                return
            }
            // 改变音频id
            this.changeStateProperty({ key: 'id', value: id });
            // 获取新数据
            this.changeStateProperty({ key: 'obtainNewData_YN', value: true });

            this.axios({
                method: "GET",
                url: "/song/url",
                params: { id }
            }).then((result) => {
                // console.log("🚀 ==> getAudioUrl ==> result", result);
                if (result.data.code === 200) {
                    if (result.data.data[0].url) {
                        console.log("🚀 ==> getAudioUrl ==> 请求路径成功！", result.data.data[0].url);
                        this.changeAudioUrl(result.data.data[0].url);

                    } else {
                        console.log("没有路径");
                        // 请求失败
                        Toast.fail({
                            message: "没有路径！\n官方的问题！",
                            forbidClick: true,
                        });
                    }
                }
            }).catch((err) => {
                console.log("🚀 ==> getAudioUrl ==> err", err);
            });

        },
    },
}
</script>

<style lang="less" scoped>
.HomeNewSong {
    color: #fff;
    margin-right: 20px;
    .NewSong_box {
        display: flex;
        align-items: center;
        position: relative;
        // 封面
        .NewSong_img {
            position: relative;
            flex-shrink: 0;
            z-index: 4;
            img {
                width: 106px;
                height: 106px;
                display: block;
                border-radius: 5px;
            }
            .diTu {
                position: absolute;
                top: 0;
                border-radius: 5px;
                width: 106px;
                height: 106px;
                background-image: url('../assets/singer.png');
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                transform: translateY(0px);
                transition: transform 1.5s ease-out 0.2s;
                z-index: -1;
            }
        }
        // 标题 播放按钮
        .Title_Play {
            z-index: 3;
            width: 100%;
            height: 70px;
            background-color: #1e1e1e;
            position: relative;
            // background-color: #fff;
            display: flex;

            &::after {
                position: absolute;
                bottom: -4px;
                // left: 2%;
                content: '';
                width: 93%;
                height: 4px;
                background: radial-gradient(#3a8ffe 0%, #3e3afe 95%);
            }

            .Title {
                .p1 {
                    padding-left: 15px;
                    width: 142px;
                    font-size: 15px;
                    margin-top: 16px;
                    margin-bottom: 13px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
                .p2 {
                    padding-left: 15px;
                    width: 142px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    opacity: 0.65;
                    text-align: center;
                }
            }
            .Play {
                flex-shrink: 0;
                // width: 33.333%;
                width: 71px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 30px;
                    display: block;
                }
            }
        }
        // 特效装饰
        .SpecialEffects {
            // 玻璃框
            .glass {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 5;
                width: 106px;
                height: 106px;
                background: url('../assets/coverall.png') 0 0 no-repeat;
                background-size: 287px;
                border-radius: 5px;
            }

            .demo {
                position: absolute;
                width: 30%;
                height: 100%;
                z-index: 3;
                top: 0;
                left: 12px;
                background: conic-gradient(#e652d8 28%, #b30cf9, #2bd2fc 65%);
                opacity: 0.5;
                filter: blur(4px);
                transform: rotate(-90deg);
            }

            .theBase {
                position: absolute;
                width: 70%;
                height: 8px;
                z-index: -1;
                right: 0;
                bottom: 2px;

                .Base0 {
                    position: absolute;
                    bottom: 9px;
                    right: 15px;
                    height: 8px;
                    width: 100%;
                    z-index: -1;
                    background: #3e3afe;
                    transform: rotate(-1deg);
                }
                .Base1 {
                    position: absolute;
                    width: 100%;
                    height: 10px;
                    right: 15px;
                    z-index: -2;
                    bottom: 6.1px;

                    transform: rotate(-2deg);
                    background-color: #ae0ee0;
                }
                .Base2 {
                    position: absolute;
                    right: -7px;
                    bottom: 9px;
                    width: 0px;
                    height: 1px;
                    z-index: 1;
                    border: 8px solid #3e3afe;
                    border-top: 0;
                    border-bottom-color: transparent;
                    border-right-color: transparent;
                    border-left-width: 15px;
                    transform: rotate(5deg);
                }
            }
        }
    }
}
</style>